---
title: Babel
description: This doc describes the `jotai/babel` bundle.
nav: 5.02
keywords: babel,gatsby,fast,refresh
---

## babel/plugin-react-refresh

This plugin adds support for React Refresh for Jotai atoms. This makes sure that state isn't reset, when developing using React Refresh.

### Usage

With a `babel` configuration file:

```json
{
  "plugins": ["jotai/babel/plugin-react-refresh"]
}
```

You can also supply your atom names to the plugin:

```json
{
  "plugins": [
    ["jotai/babel/plugin-react-refresh", { "customAtomNames": ["customAtom"] }]
  ]
}
```

Examples can be found below.

## babel/plugin-debug-label

Jotai is based on object references and not keys (like Recoil). This means there's no identifier for atoms. To identify atoms, it's possible to add a `debugLabel` to an atom, which can be found in React devtools.

However, this can quickly become cumbersome to add a `debugLabel` to every atom.

This `babel` plugin adds a `debugLabel` to every atom, based on its identifier.

The plugin transforms this code:

```js
export const countAtom = atom(0)
```

Into:

```js
export const countAtom = atom(0)
countAtom.debugLabel = 'countAtom'
```

Default exports are also handled, based on the file naming:

```js
// countAtom.ts
export default atom(0)
```

Which transform into:

```js
// countAtom.ts
const countAtom = atom(0)
countAtom.debugLabel = 'countAtom'
export default countAtom
```

### Usage

With a `babel` configuration file:

```json
{
  "plugins": ["jotai/babel/plugin-debug-label"]
}
```

You can also supply your atom names to the plugin:

```json
{
  "plugins": [
    ["jotai/babel/plugin-debug-label", { "customAtomNames": ["customAtom"] }]
  ]
}
```

Examples can be found below.

## babel/preset

Jotai ships with a `babel` containing the plugins created for Jotai.

### Usage

With a `babel` configuration file:

```json
{
  "presets": ["jotai/babel/preset"]
}
```

You can also supply your atom names to the preset:

```json
{
  "presets": [["jotai/babel/preset", { "customAtomNames": ["customAtom"] }]]
}
```

### Examples

#### Next.js

<CodeSandbox id="o2di2" />

#### Parcel

<CodeSandbox id="bgf3b" />
